<%@page import="java.util.ArrayList"%>
<%@page import="com.wanmait.movies.vo.Movie"%>
<%@page import="com.wanmait.movies.vo.MovieLanguage"%>
<%@page import="com.wanmait.movies.vo.MovieCountry"%>
<%@page import="com.wanmait.movies.vo.MovieType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>电影分类</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	/*
		分类页面实现功能
			1.数据库中拿出所有的分类 国家 语言tag
			2.可以选择三个tag，默认全部
			3.根据三个tag，从数据库中拿出所有符合条件的电影
			4.(分页)未完成
	*/
	$(function () {
		 
		$("#first_panel #movietag_ul a").click(function () {
			$("#first_panel #movietag_ul a").removeClass();
			$(this).addClass("type_class");
		});
		$("#first_panel #movielocation_ul a").click(function () {
			$("#first_panel #movielocation_ul a").removeClass();
			$(this).addClass("country_class");
		});
		$("#first_panel #movielanguage_ul a").click(function () {
			$("#first_panel #movielanguage_ul a").removeClass();
			$(this).addClass("language_class");
		});
		 
		$("#first_panel a").click(function () {
			var movietype = $(".type_class").attr("par");
			var moviecountry = $(".country_class").attr("par");
			var movielanguage = $(".language_class").attr("par");
			$.get({
				url:"/movies/TagServlet",
	    		type:"get",
	    		data:{action:"checkTagOfMovieAjax", movietype:movietype, moviecountry:moviecountry, movielanguage:movielanguage},
	    		success:function(mes){
	    			$(".ssp").remove();
	    			$("#second_panel").html(mes);
	    			 
	    		}
				
			});
		})
	})

</script>
<style type="text/css">
	body{
		background: #f5f5f5;
	}
	#first_panel{
	
	}
	#first_panel,#second_panel{
		width: 850px;
        margin: 50px auto;
        background: white;
        padding: 50px;
        border-radius: 5px; 
        box-shadow:  0px 0px 5px rgba(0,0,0,0.1);
	}
	#first_panel{
		margin-top: 80px;
	}
    #movietag,#movielocation,#movielanguage{
        
        background-color: darkviolet;
        color: white;
    }
    #first_panel #movietag_ul,#movielocation_ul,#movielanguage_ul,#movieyear_ul{
        list-style: none;
    }
    #first_panel ul li{
        float: left;
        width: 100px;
    }
    #first_panel  a:hover{
        color: red;
    }
     a {
    	text-decoration: none;
    }
    #first_panel .type_class,.country_class,.language_class,.year_class{ 
    	background-color: gray;
    	color: white;    
    }
    #second_panel{
        overflow: hidden;
    }
    #second_panel .ssp{
        float: left;
    }
    #second_panel  img{
        width: 150px;
        height: 210px;
         
    }
    #second_panel .onemovie{
        padding: 13px;
        width: 180px;
        margin: auto;
        vertical-align: middle;
        text-align: center; 
    }
     
</style>
</head>
<body>
	<jsp:include page="/include/head.jsp"></jsp:include>
	<div id="first_panel">
		<h1>电影分类</h1>
         
        <%ArrayList<MovieType> alltype = (ArrayList<MovieType>)request.getAttribute("alltype");
        ArrayList<MovieCountry> allcountry = (ArrayList<MovieCountry>)request.getAttribute("allcountry");
        ArrayList<MovieLanguage> alllang = (ArrayList<MovieLanguage>)request.getAttribute("alllang");
        //ArrayList<Movie> alltime = (ArrayList<Movie>)request.getAttribute("alltime");
        ArrayList<Movie> allrecommend = (ArrayList<Movie>)request.getAttribute("recommend");
        
        %>
        <ul id="movietag_ul">
        <li><a href="javascript:" class="type_class" par="null">全部分类</a></li>
        	<%
        	for(MovieType m : alltype){
        		%>
        		<li><a href="javascript:" par="<%=m.getMovieType() %>"><%=m.getMovieType() %></a></li>  
        		<%
        	}
       		 %>
             
        </ul>
        <br><br><hr> 
         
        <ul id="movielocation_ul">
             <li><a href="javascript:" class="country_class" par="null">全部国家</a></li>  
            <%
        	for(MovieCountry m : allcountry){
        		%>
        		<li><a href="javascript:" par="<%=m.getCountry() %>"><%=m.getCountry() %></a></li>  
        		<%
        	}
        	%>
        </ul>
        <br><br><hr> 
       
        <ul id="movielanguage_ul">
            <li><a  href="javascript:" class="language_class" par="null">全部语言</a></li>  
            <%
        	for(MovieLanguage m : alllang){
        		%>
        		<li><a href="javascript:" par="<%=m.getLanguageType() %>"><%=m.getLanguageType() %></a></li>  
        		<%
        	}
        	%>
        </ul>
         <br><br><hr> 
          <%--
         <ul id="movieyear_ul">
            <li><a  href="javascript:" class="year_class">全部语言</a></li>  
            <%
        	for(Movie m : alltime){
        		%>
        		<li><a href="javascript:"><%=m.getMovieShowtime() %></a></li>  
        		<%
        	}
        %>
        </ul> --%> 
	</div>
	 <div id="second_panel">
        <h1>推荐电影</h1>
         <%
        	for(Movie m : allrecommend){
        		%>
        		<div class="ssp"> 
           			 <div class="onemovie">
		                <img src="/movies/images/<%=m.getMovieImage()%>"><br>
		                <a href="/movies/MoviesServlet?action=showovies&movieId=<%=m.getId()%>"><%=m.getMovieName() %></a>
           			 </div>
       			</div>
        		<%
        	}
        %>
        
    </div>
</body>
</html>